<template>
  <div class="f-between header-wrapper">
        <div class="flex">
            <div class="header-title">
             <slot></slot>
            </div>
        </div>
        <div class="header-icon flex">
            <div @click="toSearch"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-search"></use>
              </svg></div>
              <div @click="showExtend"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon--tainjia"></use>
              </svg></div>
        </div>
    </div>
</template>

<script>
// import downList from './common/downList';
export default {
  // components:{
  //   downList
  // },
  data() {
    return {
    }
  },
  methods: {
    showExtend(){
      this.$emit('showExtend');
    },
    toSearch(){
      this.$router.push('/search/all');
    }
  },
}
</script>

<style scoped>
.header-wrapper{
    padding: .2rem .4rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #EDEDED;
    z-index: 100;
    box-sizing: border-box;
}
.header-title{
        font-size: .7rem;
        font-weight: 700;
}
.header-count{
  font-size: .7rem;
  font-weight: 700;
  
}
    .header-icon div:first-child{
        margin-right: .4rem;
    }
    .icon{
        font-size: .8rem;
    }
    .downList{
      position: absolute;
      top: 1.2rem;
      right: .2rem;
    }
</style>
